<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="ele上传--直接上传到编辑器中" name="first">
            <!--baidu.com是随便找的网站-->
            <el-upload class="upload-demo" drag action="https://www.baidu.com" multiple :before-upload="func">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </el-tab-pane>
        <el-tab-pane label="ajax上传--直接上传到服务器中" name="second">
            <input id="fileInput" type="file" multiple @change="preview" style="display: none"/>
            <el-button type="primary" @click='selectFile'>上传图片</el-button>
            <div id="imgPreview">
                <h2 style="text-align: left;margin-left: 100px;">以下是你现在上传的图片</h2>
                <div id="imgContainer"></div>
            </div>
            <el-button type="primary" @click='postImg'>确认上传</el-button>
        </el-tab-pane>
    </el-tabs>

</template>

<script>
    export default {
        name: "Upload",
        data:function(){
            return{
                activeName:'first',
                fileList:[]
            }
        },
        props:{
        },
        methods:{
            func:function (file) {
                let reader = new FileReader();
                reader.readAsDataURL(file)
                var that = this
                reader.onload = function (e) {
                    let result = e.target.result;
                   that.$emit('upload-img',result)
                }
            },
            postImg :function () {
                let imgs = document.querySelectorAll(".obj");
                for (let i = 0; i < imgs.length; i++) {
                    setTimeout(this.FileUpload(imgs[i].file),500);
                }
            },
            preview : function () {
                let fileList = document.getElementById('fileInput').files;
                for (let i = 0; i < fileList.length; i++){
                    let file = fileList[i];
                    let imageType = /^image\//;
                    if (!imageType.test(file.type)){
                        continue;
                    }
                    let imgInfo = document.createElement('div');
                    let img = document.createElement('img');
                    img.id='img';
                    img.width=200;
                    let txt = document.createElement('span');
                    txt.innerText = file.name;
                    img.classList.add('obj');
                    img.file = file;
                    let imgContainer = document.getElementById('imgContainer');
                    imgInfo.appendChild(img);
                    imgInfo.appendChild(txt);
                    imgInfo.id = 'imgInfo';
                    imgInfo.display='flex';
                    imgInfo.flexDirection='column';
                    imgInfo.textAlign='center';
                    imgContainer.appendChild(imgInfo);

                    let reader = new FileReader();
                    reader.onload = (function (img) {
                        return function (e) {
                            img.src = e.target.result;
                        }
                    })(img);
                    reader.readAsDataURL(file);
                }
            },
            selectFile : function () {
                let fileInput = document.getElementById('fileInput');
                fileInput.click();
            },
            FileUpload:function(file) {
                let formData = new FormData();
                formData.append('file',file);
                let xhr = new XMLHttpRequest();
                xhr.open("POST", 'https://localhost:8848/post/img');
                xhr.send(formData);
            }

        }
    }
</script>

<style scoped src="../../../css/styleSheet.css">
</style>









